<template>
	<uni-table border stripe emptyText="暂无数据">
		<uni-tr>
			<uni-th v-for="item of tableColumns" :key="item.prop" align="center"
				:width="item.width">{{ item.label }}</uni-th>
		</uni-tr>
		<uni-tr v-for="(item, index) of tableData" :key="index">
			<template v-if="operateTitle">
				<uni-td v-for="child of tableColumns.slice(0, tableColumns.length - 1)" :key="child.prop">
					{{ item[child.prop] }}
				</uni-td>
			</template>
			<template v-else>
				<uni-td v-for="child of tableColumns" :key="child.prop">
					{{ item[child.prop] }}
				</uni-td>
			</template>
			<uni-td v-if="operateTitle">
				<button class="operate" @click="handleClick(item)">{{ operateTitle }}</button>
			</uni-td>
		</uni-tr>
	</uni-table>
</template>

<script setup>
	const props = defineProps({
		tableColumns: {
			type: Array,
			default: () => []
		},

		tableData: {
			type: Array,
			default: () => []
		},
		operateTitle: Boolean
	})
	
	const emits = defineEmits(['handleClick'])

	const handleClick = (item) => {
		emits('handleClick', item)
	}
</script>

<style scoped lang="scss">
	.operate {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
	}
</style>